<template>
	<div class="gooinfo-container">
		<!-- 轮播图区域 -->
		<transition
		@before-enter="beforeEnter"
		@enter="enter"
		@after-enter="afterEnter">

			
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>
		
		<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
					</div>
				</div>
		</div>
		
		<!-- 商品购买区域 -->
		
		<div class="mui-card">
			<div class="mui-card-header">{{gooddata.title}}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价格：<del>￥{{gooddata.market_price}}</del>&nbsp;&nbsp;销售价:<span class="now_price">￥{{gooddata.sell_price}}</span>
					</p>
					<p>购买数量:<numbox @getCount="getselectCount" :max="gooddata.stock_quantity"></numbox></p>
					<p>
						<mt-button type="primary" size="large">立即购买</mt-button>
						<mt-button type="danger" size="large" @click="addtoShopcart"  >加入购物车</mt-button>
					</p>
				</div>
			</div>
		
		</div>
		
		<!-- 商品参数区域 -->
		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号:{{gooddata.goods_no}}</p>
					<p>库存情况:{{gooddata.stock_quantity}}件</p>
					<p>上架时间:{{gooddata.add_time | dataFormat}}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="danger" size="large" plain @click="godesc(id)">图文介绍</mt-button>
				<mt-button type="primary" size="large" plain @click="gocomment(id)">商品评论</mt-button>
			</div>
		</div>
		
	</div>
</template>

<script>
	import swiper from '../subcomponent/swiper.vue'
	import numbox from '../subcomponent/goodlnfo-numbox.vue'
	export default{
		data(){
			return{
				id:this.$route.params.id,
				lunbotu:[],
				gooddata:{},
				ballFlag:false,
				selecteCount:1 //保存用户选中商品数量，默认为1
				
			}
		},
		created(){
			this.getLunbotu()
			this.getGoodsdata()
		},
		methods:{
			getLunbotu(){
				this.$http.get("api/getthumimages/"+this.id).then(result =>{
					if(result.body.status === 0){
						result.body.message.forEach(item =>{
							item.img = item.src
						})
						this.lunbotu = result.body.message
					}
				})
			},
			getGoodsdata(){
				this.$http.get("api/goods/getinfo/"+this.id).then(result =>{
					if(result.body.status === 0){
						this.gooddata = result.body.message[0]
					}
				})
			},
			godesc(id){
				this.$router.push({name:'godesc',params:{id}})
			},
			gocomment(id){
				this.$router.push({name:'gocomment',params:{id}})
			},
			addtoShopcart(){
				this.ballFlag = ! this.ballFlag
				var goodsinfo = {
						id:this.id, 
						count:this.selecteCount,
						price:this.gooddata.sell_price,
						selected:true
				
				};
				this.$store.commit('addToCat',goodsinfo);
			},
			beforeEnter(el){
				el.style.transform = "translate(0,0)";
			},
			enter(el,done){
;
				el.offsetWidth;
				const ballPOsition = this.$refs.ball.getBoundingClientRect();
				const zeroPostion = document.getElementById("zero").getBoundingClientRect()
				const xDist = zeroPostion.left - ballPOsition.left;
				 const yDist = zeroPostion.top - ballPOsition.top
				el.style.transform = `translate(${xDist}px,${yDist}px)`;
				el.style.transition = 'all 0.5s cubic-bezier(.4,-0.3,1,.68)';
				done()
			},
			afterEnter(el){
				this.ballFlag = ! this.ballFlag;
			},
			getselectCount(count){
				//当子组件把选中的数量转递给父组件时候，把选中的的值保存到data中
				this.selecteCount = count
				console.log("父组件收到子组件传递过来的值"+this.selecteCount)
	
			}
			
			
		},
		components:{
			swiper,
			numbox
			
		}
		
		
	}
</script>

<style lang="scss" scoped>
	.gooinfo-container{
		background-color: #eee;
		overflow: hidden;
	}
	.now_price{
		font-size: 18px;
		color: red;
	}
	.mui-card-footer{
		display: block;
		button{
			margin: 15px 0;
		}
	}
	
	.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		position: absolute;
		background-color: red;
		z-index: 99;
		left: 138px;
		top: 392px;
		
	}
</style>
